<template>
  <div class="center-second-chart-root">
    <div id="center-second-chart"></div>
    <span class="unit">单位(套)</span>
    <div class="label">
      <div>
        检查批次:{{ShantyTownNewWorkRatio}}
        <!-- <countTo :startVal="0" :endVal="ShantyTownNewWorkRatio" separator></countTo> -->
      </div>
      <div>
        检查项目:{{SubsidizedHousingPrjCompletedRatio}}
        <!-- <countTo :startVal="0" :endVal="SubsidizedHousingPrjCompletedRatio" separator></countTo> -->
      </div>
      <div>
        查出问题:{{PublicHouseRentalSubsidyRatio}}
        <!-- <countTo :startVal="0" :endVal="PublicHouseRentalSubsidyRatio" separator></countTo> -->
      </div>
      <div>
        问题整改:{{PublicHouseAssignedRatio}}
        <!-- <countTo :startVal="0" :endVal="PublicHouseAssignedRatio" separator></countTo> -->
      </div>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  data() {
    return {
      ShantyTownNewWorkRatio: 0,
      SubsidizedHousingPrjCompletedRatio: 0,
      PublicHouseRentalSubsidyRatio: 0,
      PublicHouseAssignedRatio: 0
    };
  },
  props: ["chartData"],
  mounted() {
    this.draw();
  },
  watch: {
    chartData: {
      handler: function() {
        this.draw();
      },
      deep: true
    }
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let myChartPieLeft = echarts.init(
        document.getElementById("center-second-chart")
      );
      if (this.chartData) {
        this.ShantyTownNewWorkRatio = this.chartData.ShantyTownNewWorkRatio
          ? this.chartData.ShantyTownNewWorkRatio
          : 16000;
        this.SubsidizedHousingPrjCompletedRatio = this.chartData
          .SubsidizedHousingPrjCompletedRatio
          ? this.chartData.SubsidizedHousingPrjCompletedRatio
          : 38000;
        this.PublicHouseRentalSubsidyRatio = this.chartData
          .PublicHouseRentalSubsidyRatio
          ? this.chartData.PublicHouseRentalSubsidyRatio
          : 28000;
        this.PublicHouseAssignedRatio = this.chartData.PublicHouseAssignedRatio
          ? this.chartData.PublicHouseAssignedRatio
          : 24000;
      }
      let option = {
        color: [
          "rgba(3, 73, 169, 0.1)",
          "#D94F64",
          "#FCB33A",
          "#60BFB9",
          "#2BB7FF"
        ],
        series: [
          {
            name: "访问来源",
            type: "pie",
            // selectedMode: "single",
            selected: {
              another: false,
              another1: false
            },
            radius: ["30%", "35%"],
            label: {
              show: false
            },
            data: [
              {
                name: "another",
                value: 100000 - this.PublicHouseAssignedRatio
              },
              { name: "another1", value: this.PublicHouseAssignedRatio }
            ]
          },
          {
            name: "访问来源",
            type: "pie",
            // selectedMode: "single",
            selected: {
              another: false,
              another1: false
            },
            radius: ["45%", "50%"],
            label: {
              show: false
            },
            data: [
              {
                name: "another",
                value: 100000 - this.PublicHouseRentalSubsidyRatio
              },
              { name: "another2", value: this.PublicHouseRentalSubsidyRatio }
            ]
          },
          {
            name: "访问来源",
            type: "pie",
            // selectedMode: "single",
            selected: {
              another: false,
              another1: false
            },
            radius: ["60%", "65%"],
            label: {
              show: false
            },
            data: [
              {
                name: "another",
                value: 100000 - this.SubsidizedHousingPrjCompletedRatio
              },
              {
                name: "another3",
                value: this.SubsidizedHousingPrjCompletedRatio
              }
            ]
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["75%", "80%"],
            // selectedMode: "single",
            selected: {
              another: false,
              another1: false
            },
            label: {
              show: false
            },
            data: [
              { name: "another", value: 100000 - this.ShantyTownNewWorkRatio },
              { name: "another4", value: this.ShantyTownNewWorkRatio }
            ]
          }
        ]
      };

      myChartPieLeft.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
.center-second-chart-root {
  position: relative;
  margin-left: 5rem;

  #center-second-chart {
    width: 16rem;
    height: 16rem;
    margin-top: 0.5rem;
  }

  .unit {
    position: absolute;
    top: 7.5rem;
    left: 6.1rem;
    opacity: 0.6;
    font-family: PingFangSC-Regular;
    font-size: 0.9rem;
    color: #bed7fa;
    letter-spacing: 0;
  }
  .label {
    position: absolute;
    top: 1rem;
    left: 8.5rem;
    opacity: 0.6;
    font-family: PingFangSC-Regular;
    font-size: 0.9rem;
    // color: #bed7fa;
    color: white;
    letter-spacing: 0;
  }
}
</style>
